<!-- 附件规则列表 -->
<template>
  <rk-grid ref="expendPropertyRef"
    dataUrl="/fileRuleInfo/getExtendPropertyList"
    style="height: 100%;"
    :boxConfig="false"
    :pagerConfig="false"
    :params="queryParams"
    :columns="tableColumns">
    <template #toolbar_buttons>
      <el-button type="primary"
        @click="handleAdd">新增</el-button>
    </template>
    <template #toolbar_tools>
      <el-input v-model="queryParams.keywords"
        style="width: 240px;margin-right: 15px;"
        placeholder="请输入业务类型"
        @input="handleSearch"
        clearable />
    </template>
    <template #operation="{ row }">
      <el-dropdown>
        <span class="el-dropdown-link">
          更多操作
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in tableOperation"
              @click="handleOperation(item,row)">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </rk-grid>
  <expend-property-form-modal ref="expendPropertyFormModal"
    @refresh="handleSearch"></expend-property-form-modal>
</template>

<script setup>
import { ElMessage, ElLoading } from "element-plus"
import { operationColumn } from '@/config/column-config.js'
import { RkConfirmBox } from '@/components/message-box/index.js'
import { useAttaruleApi } from '@/api/index.js'
import ExpendPropertyFormModal from "./modal/ExpendPropertyFormModal.vue";
import { ArrowDown } from '@element-plus/icons-vue'

const { deleteExtendProperty, getExtendProperty } = useAttaruleApi();
// 系统参数
const queryParams = reactive({
  keywords: undefined
})

const expendPropertyRef = ref()
// 新增面板模板引用
const expendPropertyFormModal = ref()

const tableColumns = ref([
  { field: 'busiType', title: '业务类型', width: 150, align: 'left' },
  { field: 'busiTable', title: '业务数据表', width: 150, align: 'left' },
  { field: 'busiTableId', title: '业务表ID字段', width: 240, align: 'left' },
  { field: 'classify1', title: '分类1', width: 180, align: 'left' },
  { field: 'classify2', title: '分类2', width: 180, align: 'left' },
  { field: 'classify3', title: '分类3', width: 180, align: 'left' },
  { field: 'remark', title: '业务描述', width: 200, align: 'left' },
  { field: 'keyword', title: '关键字', width: 300, align: 'left' },
  operationColumn()
])

const tableOperation = ref([
  { id: "0", name: '修改' },
  { id: "1", name: '删除' },
])
// 获取详情
const getDetailInfo = async (busiType) => {
  const result = await getExtendProperty({ busiType })
  const { data, code, msg } = result
  if (code === 200) {
    expendPropertyFormModal.value.handleOpen({ model: 'edit', echoForm: data })
  }
}

const handleOperation = (item, row) => {
  if (item.id === '0') {
    getDetailInfo(row.busiType)
  } else if (item.id === '1') {
    const { busiType } = row
    let loading = null
    RkConfirmBox({
      title: '提示',
      content: "确定要删除吗",
      onSubmit: async function () {
        loading = ElLoading.service({ fullscreen: true, text: '删除中,请稍等..' })
        const deleteParams = { busiTypes: busiType }
        const result = await deleteExtendProperty(deleteParams)
        const { data, code, msg } = result
        if (code === 200) {
          loading.close()
          ElMessage({ message: `删除成功！`, type: "success" });
          handleSearch();
        } else {
          loading.close()
          ElMessage({ message: `${msg}`, type: "error" });
        }
      },
      onCancel: function () {
      }
    })
  }
}

const handleSearch = () => {
  expendPropertyRef.value.searchEvent()
}

// 新增项目
const handleAdd = () => {
  expendPropertyFormModal.value.handleOpen({ model: 'add' })
}
</script>

<style lang="scss" scoped>
</style>